<template>
  <tableList
      ref="tableListPageRef"
      border
      :heightMin="230"
      :total="$store.state.flowInvoice.pages.total"
      :keySet="keySet"
      :tableData="$store.state.flowInvoice.flowList"
      :paginationShow="true"
      :pageNumber="$store.state.flowInvoice.pages.current"
      :pageSize="$store.state.flowInvoice.pages.size"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :showSelection="true"
      @handleSelectionChange="handleSelectionChange"
  >
    <template #czlx="row">
      <el-tag type="danger" v-if="row.row.czlx == '1'">拆</el-tag>
      <el-tag type="success" v-else-if="row.row.czlx == '2'">合</el-tag>
      <el-tag type="info" v-else>没拆没合</el-tag>
    </template>
    <template #wkpje="row">
      <span v-if="row.row.wkpje < 0" style="color: red">{{ row.row.wkpje }}</span>
      <span v-else>{{ row.row.wkpje }}</span>
    </template>
    <template #jyje="row">
      <span v-if="row.row.jyje < 0" style="color: red">{{ row.row.jyje }}</span>
      <span v-else>{{ row.row.jyje }}</span>
    </template>
    <template #bhsje="row">
      <span v-if="row.row.bhsje < 0" style="color: red">{{ row.row.bhsje }}</span>
      <span v-else>{{ row.row.bhsje }}</span>
    </template>
    <template #xxse="row">
      <span v-if="row.row.xxse < 0" style="color: red">{{ row.row.xxse }}</span>
      <span v-else>{{ row.row.xxse }}</span>
    </template>
  </tableList>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
// import mixinTable from '@/mixin/mtable.js'

export default {
  data() {
    return {
      keySet: [
        {
          label: '状态',
          englishName: 'czlx',
          width: 100,
          isSlot: true,
          slotName: 'czlx',
        },
        {
          label: '交易号',
          englishName: 'jyls',
        },
        {
          label: '交易日期',
          englishName: 'jyrq',
          sortable: true,
        },
        {
          label: '业务编号',
          englishName: 'ywbh',
          width: '150',
          sortable: true,
        },
        {
          label: '产品代码',
          englishName: 'cpdm',
          sortable: true,
        },
        {
          label: '原业务编号',
          englishName: 'ysjyls',
          width: '150',
          sortable: true,
        },
        {
          label: '业务类型',
          englishName: 'ywlx',
          sortable: true,
        },
        {
          label: '产品名称',
          englishName: 'cpmc',
          sortable: true,
        },
        {
          label: '保全项目代码',
          englishName: 'bqxmdm',
          width: '120',
        },
        {
          label: '保全项目名称',
          englishName: 'bqxmmc',
          width: '120',
        },
        {
          label: '未开票金额',
          englishName: 'wkpje',
          isSlot: true,
          slotName: 'wkpje',
          width: 150,
          sortable: true,
        },
        {
          label: '交易金额（含税）',
          englishName: 'jyje',
          width: 150,
          isSlot: true,
          slotName: 'jyje',
          sortable: true,
        },
        {
          label: '交易金额（不含税）',
          englishName: 'bhsje',
          isSlot: true,
          slotName: 'bhsje',
          sortable: true,
                              width: '180',
        },
        {
          label: '税率',
          englishName: 'sysl',
          sortable: true,
        },
        {
          label: '税额',
          englishName: 'xxse',
          isSlot: true,
          slotName: 'xxse',
          sortable: true,
        },
        {
          label: '获票人名称',
          englishName: 'kfhm',
          width: 150,
          sortable: true,
        },
        {
          label: '纳税人识别号',
          englishName: 'nsrsbh',
          width: 150
        },
        {
          label: '是否个人业务',
          englishName: 'isgryw',
          width: 150
        },
        {
          label: '证件类型',
          englishName: 'zjlx',
        },
        {
          label: '证件号码',
          englishName: 'zjhm',
          width: 150
        },
        {
          label: '险种代码',
          englishName: 'xzdm',
        },
        {
          label: '险种简称',
          englishName: 'xzjc',
        },
        {
          label: '险种全称',
          englishName: 'xzqc'
        },
        {
          label: '备注',
          englishName: 'bz'
        },
        {
          label: '交易机构',
          englishName: 'jyjg',
        },
        {
          label: '投保单号',
          englishName: 'tbdh',
        },
        {
          label: '汇交单号',
          englishName: 'hjdh',
        },
        {
          label: '学平险受理号',
          englishName: 'xpxslh',
          width: 150
        },
        {
          label: '税优识别码',
          englishName: 'sysbm',
          width: 150
        },
        {
          label: '缴费方式',
          englishName: 'jffs',
        },
        {
          label: '缴费起期',
          englishName: 'jfqsrq',
        },
        {
          label: '缴费止期',
          englishName: 'jfzzrq',
        },
        {
          label: '手机号',
          englishName: 'sjh'
        },
        {
          label: '电子邮箱',
          englishName: 'dzyx'
        },
        {
          label: '服务人员姓名 ',
          englishName: 'fwryxm',
          width: 150
        },
        {
          label: '服务人员编号',
          englishName: 'fwrybh',
          width: 150,
        },
        {
          label: '部',
          englishName: 'bmc'
        },
        {
          label: '区',
          englishName: 'qmc'
        },
        {
          label: '组',
          englishName: 'zmc'
        },
        {
          label: '来源系统',
          englishName: 'sjly'
        },
        {
          label: '供数日期',
          englishName: 'gsrq'
        }
      ],
    }
  },

  mounted() {
    this.$store.commit('flowInvoice/tableRefVuex', this.$refs.tableListPageRef.$refs.table)
  },
  methods: {
    handleSizeChange(val) {
      this.$store.commit('flowInvoice/handlerPages', {size: val})
      this.$store.dispatch('flowInvoice/getList')
    },
    handleCurrentChange(val) {
      this.$store.commit('flowInvoice/handlerPages', {current: val})
      this.$store.dispatch('flowInvoice/getList')
    },
    handleSelectionChange(val) {
      this.$store.commit('flowInvoice/handleSelectionChange', val)
    },
  },

  beforeRouteLeave(to,from,next) {
    // 这里需要删除
    this.$store.commit('flowInvoice/handleSelectionChange', [])
    next()
  },
  components: {
    tableList
  },
}
</script>
